<template>
  <view class="title-s-n">
    {{ title }}
    <view class="solid-item"></view>
    <div class="sub-title">
      <slot></slot>
    </div>
  </view>
</template>

<script>
  export default {
    name: 'yy-title',
    props: {
      title: {
        type: String,
        default: ''
      }
    }
  }
</script>

<style lang="scss" scoped>
  .title-s-n {
    font-weight: bold;
    font-size: 30rpx;
    color: #181818;
    padding-left: 14rpx;
    position: relative;
    padding-top: 32rpx;
    padding-bottom: 32rpx;
    display: flex;

    .solid-item {
      width: 8rpx;
      height: 22rpx;
      background: #2488F5;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .sub-title {
      font-weight: 400;
      font-size: 28rpx;
      color: #A2A2A2;
    }
  }
</style>